/**
 * @file
 * @auth jinguangguo
 * @date 2016/12/29
 */

@import "../../scss/base/var";

.comp-menu {
    ::-webkit-scrollbar-thumb {
        background-color: #383939;
        border: 0;
    }
    .menu-title {
        padding-left: 16px;
        font-family: $font-family-bold;
        font-weight: bold;
        color: #fff;
        height: 45px;
        line-height: 45px;
    }
    >.menu {
        padding-top: 60px;
        margin-left: 16px;
        //border-left: 1px solid #000000;
        width: auto;
        max-height: 330px;
        overflow-y: scroll ;
        font-size: 12px;
        .item {
            .item-link {
                display: block;
                height: 45px;
                line-height: 45px;
                padding: 0 10px 0 16px;
                margin-right: 22px;
                cursor: pointer;
                .text {
                    float: left;
                    height: 45px;
                    line-height: 45px;
                    &-coin {
                        width: 32%;
                        color: #cccdcd;
                        transition: color 0.4s ease;
                    }
                    &-price {
                        width: 38%;
                        color: #999;
                    }
                    &-radio {
                        width: 30%;
                        text-align: right;
                        font-weight: bold;
                    }
                    .num, .suffix, .icon {
                        vertical-align: middle;
                    }
                    .icon {
                        font-size: 16px;
                    }
                    &-green {
                        color: $color-buy;
                        .icon:before {
                            color: $color-buy;
                        }
                    }
                    &-red {
                        color: $color-sell;
                        .icon:before {
                            color: $color-sell;
                        }
                    }
                }
                &:hover {
                    background-color: #262626;
                    .text-coin {
                        color: #fff;
                    }
                }
            }
        }
    }

    .coins-tab{
        width: 490px;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        background-color: #313131;
        margin: 0 20px;
        border-bottom:1px solid #000000 ;
        &-right{
            position: relative;
            display: inline-block;
            width: 100px;
            .search-input{
                width: 100%;
                border-radius: 16px;
                background-color: #464646;
            }
            .icon{
                position: absolute;
                right: 8px;
                top: 10px;
                color: #fff;
            }

        }
    }
}